<template>
  <view class="patient-box">
    <view class="patient-item" v-for="(item, index) in dataList" :key="index" @click="clickPatientItem(item)">
      <view class="img" v-if="item.userPhoto">
        <image
          class="user-img"
          :src="item.userPhoto"
          mode="aspectFill"
        />
      </view>
      <view class="info-box">
        <view class="info">
          <view class="name">{{ item.name }}</view>
          <view class="sex">{{ item.sex ? item.sex === 1 ? '男' : '女' : '未知' }}</view>
          <view class="age">{{ item.age || '--' }}岁</view>
        </view>
        <view class="label">{{ item.remark || '' }}</view>
      </view>
      <uni-icons type="right" color="#999" size="16"></uni-icons>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'PatientList',
    data() {
      return {
        dataList: []
      }
    },
    props: {
      patientList: {
        type: Array,
        default: []
      }
    },
    watch: {
      patientList: {
        handler(newVal, oldVal) {
          this.dataList = uni.$u.deepClone(newVal)
        },
        deep: true
      }
    },
    created() {
      this.dataList = uni.$u.deepClone(this.patientList)
    },

    methods: {
      clickPatientItem(item) {
        uni.navigateTo({
          url: `/subPages/physicianTrainPlan/patient/patientDetail?medicineId=${item.id}`
        })
      }
    }
  }
</script>
<style lang="scss">
  .patient-box {
    padding-top: 30rpx;
  }
  .patient-item {
    display: flex;
    align-items: center;
    margin: 0 30rpx 30rpx;
    padding: 30rpx;
    border-radius: 16rpx;
    background-color: #FFF;
    .img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      overflow: hidden;
      .user-img {
        width: 100%;
        height: 100%;
      }
    }
    .info-box {
      flex: 1;
      margin: 0 20rpx;
      .info {
        display: flex;
        .name {
          font-size: 36rpx;
          font-weight: 500;
          color: #333;
        }
        .sex,
        .age {
          margin-left: 20rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #666;
        }
      }
      .label {
        display: inline-block;
        margin-top: 20rpx;
        padding: 8rpx 18rpx;
        font-size: 24rpx;
        font-weight: 400;
        border-radius: 8rpx;
        color: #4B84D4;
        background: rgba(75, 132, 212, .1);
      }
    }
  }
</style>
